import React, {useEffect, useState} from 'react';
import { useModel } from '@@/exports';
import {listMyChartByPageUsingPost} from "@/services/yubi/chartController";
import {Divider, Avatar, List, message, Card, Collapse} from "antd";
import Search from "antd/es/input/Search";
import ReactECharts from 'echarts-for-react';
import {Result} from "antd-mobile-alita";

const MyChart: React.FC = () => {

  const initSearchParams = {
    pageSize: 2,
    current: 1,
    sortField: 'createTime',
    sortOrder: 'desc',
  }

  const [searchParams,setSearchParams] = useState<API.ChartQueryRequest>({
    ...initSearchParams
  });
  const [chartList,setChartList] = useState<API.Chart>();
  const [total,setTotal] = useState<number>(0);
  // 从全局状态中获取到当前登录的用户信息
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  // 加载状态，用来控制页面是否加载，默认正在加载
  const [loading, setLoading] = useState<boolean>(true);

  //获取数据
  const loadData = async () => {
    try {
      const res = await listMyChartByPageUsingPost(searchParams);   //等后端返回再给结果
      if(res.data){
        setChartList(res.data.records ?? []);
        setTotal(res.data.total ?? 0);
      } else {
        message.error('获取我的图表失败');
      }
    } catch (e : any) {
      message.error('获取我的图表失败，' + e.message);
    }
  }

  function chart(item) {
    try {
      return JSON.parse(item.genChart) ?? '';
    } catch (e) {
      message.error('AI生成代码不规范'+ e.message);
    }
  }


  // 首次页面加载时，触发加载数据
  useEffect(() => {
    // 这个页面首次渲染的时候，以及这个数组中的搜索条件发生变化的时候，会执行loadData方法,自动触发重新搜索
    loadData();

    const interval = setInterval(() => {
      loadData();
    }, 10000);
    return () => clearInterval(interval);
  },[searchParams]);

  return (
    // 把页面内容指定一个类名 my-chart
    <div className="my-chart">
      {/* 引入搜索框 */}
      <div>
        {/*
          当用户点击搜索按钮触发 一定要把新设置的搜索条件初始化，要把页面切回到第一页;
          如果用户在第二页,输入了一个新的搜索关键词,应该重新展示第一页,而不是还在搜第二页的内容
        */}
        <Search placeholder="请输入图表名称" enterButton  onSearch={(value) => {
          // 设置搜索条件
          setSearchParams({
            // 原始搜索条件
            ...initSearchParams,
            // 搜索词
            name: value,
          })
        }}/>
      </div>
      <div className="margin-16"/>
      {/*  数据列表：*/}
      {/*{JSON.stringify(chartList)}*/}
      <List
        itemLayout="vertical"
        size="large"
        pagination={{
          onChange: (page,pageSize) => {
            console.log(page);
            setSearchParams({
              ...searchParams,
              current: page,
              pageSize: pageSize,
            })
          },
          pageSize: searchParams.pageSize,
          current: searchParams.current,
          total: total,
        }}
        dataSource={chartList}
        footer={
          <div>
            <b>ant design</b> footer part
          </div>
        }
        renderItem={(item) => (
          <List.Item
            key={item.id}
            // 在extra展示图表默认没有width(宽度)，需要自己设置，无法适配
            // extra={
            // }
          >
          <Card style={{ width: '100%' }}>
            <List.Item.Meta
              avatar={<Avatar src={currentUser.userAvatar} />}
              title={item.name}
              description={item.charType ? '图表类型:' + item.charType : undefined}
            />
            <>
              {
                // 当状态（item.status）为'wait'时，显示待生成的结果组件
                item.status === 'wait' && <>
                  <Result
                    // 状态为警告
                    status="warning"
                    title="待生成"
                    // 子标题显示执行消息，如果执行消息为空，则显示'当前图表生成队列繁忙，请耐心等候'
                    subTitle={item.execMessage ?? '当前图表生成队列繁忙，请耐心等候'}
                  />
                </>
              }
              {
                item.status === 'running' && <>
                  <Result
                    // 状态为信息
                    status="info"
                    title="图表生成中"
                    // 子标题显示执行消息
                    subTitle={item.execMessage}
                  />
                </>
              }
              {
                // 当状态（item.status）为'succeed'时，显示生成的图表
                item.status === 'succeed' && <>
                  {'分析目标：' + item.goal }
                  <Divider />
                  {/*
              把在智能分析页的图表展示复制粘贴到此处;
              要把后端返回的图表字符串改为对象数组,如果后端返回空字符串，就返回'{}'
            */}
                  分析结论:
                  <Card>
                    {item.genResult}
                  </Card>
                  <Divider />
                  <div>
                    {chart(item) ?
                      <div>
                        <ReactECharts option={item.genChart && JSON.parse(item.genChart)}/>
                        <Collapse  //折叠框
                          items={[{ key: '1', label: '生成图表的代码', children:
                              <pre>
                            <code className="javascript">
                              {item.genChart}
                            </code>
                          </pre> }]}
                        />
                      </div>
                      :
                      <div>
                        {'图表代码:'}
                        <Card>
                     <pre>
                       <code className="javascript">
                            {item.genChart}
                       </code>
                      </pre>
                        </Card>
                      </div>
                    }
                  </div>
                </>
              }
              {
                // 当状态（item.status）为'failed'时，显示生成失败的结果组件
                item.status === 'failed' && <>
                  <Result
                    status="error"
                    title="图表生成失败"
                    subTitle={item.execMessage}
                  />
                </>
              }
            </>

          </Card>
          </List.Item>
        )}

      />

      <br/>
      总数：{total}
    </div>
  );
};
export default MyChart;
